<script setup>
import {defineProps, defineEmits, ref} from 'vue'
import StepTitleDescription from '@/components/common/StepTitleDescription.vue'
import InchesInput from '@/components/common/InchesInput.vue'
import OneImage from '@/components/common/OneImage.vue'

const stepTitleAndDescription = ref({
  title: 'Step 4',
  description: 'Measure height to decide drapery length.'
})

const emit = defineEmits(['submit'])

const getInches = (inches) => {
  emit('submit', inches)
}

const OneImageData = ref({
  src: 'https://cdn.shopify.com/s/files/1/0744/8598/9591/files/A7_Heigh_from_rod_to_floor_for_pleated.jpg?v=1745721099',
  alt: 'Drapery Length'
})

</script>

<template>

  <div class="content-container">
    <StepTitleDescription :title-and-description="stepTitleAndDescription" />

    <p>For soft top style ( tab top, 4-in-1, rod pocket, back tab ), the drapery length is measured from top of rod to floor.</p>
    <p>For pleated and flat hook style, the curtain length is measured from rod ring eyelet or track ring eyelet to floor.</p>
    <p>For grommet style, the length is measured from top of rod to floor.</p>

    <OneImage :OneImage="OneImageData"/>

    <InchesInput @submit="getInches"/>

  </div>

</template>

<style scoped>

.content-container {
  display:flex;
  flex-direction: column;
  align-items: center;
}

</style>